<template>
	<div id="bankCard">
		<p class="Title">我的提现账户</p>
		<!-----------银行卡列表------------->
		<div v-show="page == 1" class="card_list">
			<div v-for="(item,key) in cardList" class="card_item">
				<div class="item_left">
					<img v-if="item.bankName == '光大银行'" src="../../static/img/wallet-gd.png"/>
					<img v-else-if="item.bankName == '中国工商银行'" src="../../static/img/wallet-gs.png"/>
					<img v-else-if="item.bankName == '中国农业银行'" src="../../static/img/wallet-ny.png"/>
					<img v-else-if="item.bankName == '中国建设银行'" src="../../static/img/wallet-js.png"/>
					<img v-else-if="item.bankName == '招商银行'" src="../../static/img/wallet-zs.png"/>
					<img v-else-if="item.bankName == '中国银行'" src="../../static/img/wallet-zg.png"/>
					<img v-else-if="item.bankName == '交通银行'" src="../../static/img/wallet-jt.png"/>
					<img v-else-if="item.bankName == '中信银行'" src="../../static/img/wallet-zx.png"/>
					<img v-else-if="item.bankName == '华夏银行'" src="../../static/img/wallet-hx.png"/>
					<img v-else-if="item.bankName == '民生银行'" src="../../static/img/wallet-ms.png"/>
					<img v-else-if="item.bankName == '广发银行'" src="../../static/img/wallet-gf.png"/>
					<img v-else-if="item.bankName == '兴业银行'" src="../../static/img/wallet-xy.png"/>
					<div class="bank_name">
						<p>{{item.bankName}}</p>
						<p v-text="formatBankNo(item.cardNum)"></p>
					</div>
				</div>
				<div class="card_operation">
					<router-link to="/agent/a">提现</router-link>
					<p @click="deleteBankCard(key)">取消绑定</p>
				</div>
			</div>
			<div @click="page = 2" class="add_card">
				<img src="../../static/img/bankcard-01.png"/>
				<p>添加银行卡</p>
			</div>
		</div>
		<!---------绑定银行卡表单-------------->
		<div v-show="page == 2" class="bank_form">
			<div class="form_item">
				<p>银行卡名称：</p>
				<el-select v-model="cardForm.bankName" placeholder="请选择银行名称">
				    <el-option
				        v-for="item in bankList"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				    </el-option>
				</el-select>
			</div>
			<div class="form_item">
				<p>银行卡号：</p>
				<input type="text" placeholder="请输入银行卡号" v-model="cardForm.cardNum" />
			</div>
			<div class="form_item">
				<p>持卡人姓名：</p>
				<input type="text" placeholder="请输入持卡人姓名" v-model="cardForm.realname" />
			</div>
			<div class="form_item">
				<p>您绑定的手机号码：</p>
				<div class="phone">
					<p>{{phone}}</p>
					<input type="button" value="获取验证码" @click="phoneCode"/>
				</div>
			</div>
			<div class="form_item">
				<p>请输入手机验证码：</p>
				<input type="text" placeholder="请输入手机验证码" v-model="verificationCode"/>
			</div>
			<input id="sub" type="button" value="确认绑定" @click="addBankCard"/>
		</div>
	</div>
</template>

<script>
export default {
	name:'bankCard',
	data:function(){
		return{
			page: 1,//显示银行卡列表或绑定银行卡表单
			cardList:[//银行卡类别
				{
					bankName: '中国工商银行',//银行名称
					cardNum: '1254789631254789631',//卡号
					id:'',//卡id
				},
				{
					bankName: '中国农业银行',//银行名称
					cardNum: '1254789631254789',//卡号
					id:'',//卡id
					
				},
				{
					bankName: '中国银行',//银行名称
					cardNum: '1254789631254789',//卡号
					id:'',//卡id
				},
			],
			bankList:[//银行名称列表
				{label: '中国工商银行',value: '中国工商银行'},
				{label: '中国农业银行',value: '中国农业银行'},
				{label: '中国建设银行',value: '中国建设银行'},
				{label: '中国银行',value: '中国银行'},
				{label: '招商银行',value: '招商银行'},
				{label: '交通银行',value: '交通银行'},
				{label: '光大银行',value: '光大银行'},
				{label: '中信银行',value: '中信银行'},
				{label: '华夏银行',value: '华夏银行'},
				{label: '民生银行',value: '民生银行'},
				{label: '广发银行',value: '广发银行'},
				{label: '兴业银行',value: '兴业银行'},
			],
			phone: '13169884787',//已绑定手机号
			verificationCode: '',//验证码
			cardForm:{//绑定银行卡表单
				bankName: '', //银行名称
				cardNum: '',//卡号
				realname: '',//持卡人姓名
			},
			keyCode:'',
		}
	},
	mounted:function(){
		this.bankCardList();
	},
	methods:{
		//----------银行卡号格式化--------------
		formatBankNo:function(BankNo){
		    if (BankNo == "") return;
		    var account = new String(BankNo);
		    account = account.substring(0,23); /*帐号的总数, 包括空格在内 */
		    if (account.match(".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null){
			      /* 对照格式 */
			    if (account.match(".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" + ".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" +
			      ".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" + ".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null){
			        var accountChar = "";
			        var accountNumeric = accountChar;
			        var i;
			        for (i=0;i<account.length;i++){
			            accountChar = account.substr (i,1);
			        	if (!isNaN (accountChar) && (accountChar != " ")) accountNumeric = accountNumeric + accountChar;
			        }
				        account = "";
				    for (i=0;i<accountNumeric.length;i++){  /* 可将以下空格改为-,效果也不错 */
				        if (i == 4) account = account + " "; /* 帐号第四位数后加空格 */
				        if (i == 8) account = account + " "; /* 帐号第八位数后加空格 */
				        if (i == 12) account = account + " ";/* 帐号第十二位后数后加空格 */
				        if (i == 16) account = account + " ";/* 帐号第十二位后数后加空格 */
				        account = account + accountNumeric.substr (i,1)
			        }
			    }
		    }else{
		    	account = " " + account.substring (1,5) + " " + account.substring (6,10) + " " + account.substring (14,18) + "-" + account.substring(18,25);
		    }
		    if (account != BankNo) return account;
		},
		phoneCode:function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				    phone:_this.phone,
			});
			_this.$axios.post('/sms/public/phoneCode',postData).then(function(res){
				if(res.data.message=="succ"){
					_this.keyCode = res.data.result;
					alert("发送成功");
				}else{
					alert("发送失败");
					console.log(res.data.result);
				}   
			}).catch(function (error) {
			    console.log(error);
			});
		},
		addBankCard:function(){
			var _this = this;
			_this.$loading.show();
			if(_this.cardForm.cardNum==null || _this.cardForm.cardNum==""){
				_this.$alert('2','银行卡号不能为空');
				_this.$loading.hide();
				return;
			}
			if(_this.cardForm.realname==null || _this.cardForm.realname==""){
				_this.$alert('2','真实姓名不能为空');
				_this.$loading.hide();
				return;
			}
			if(!/^\d{16,19}$/.test(_this.cardForm.cardNum)){
				_this.$alert('2','银行卡号格式错误');
				_this.$loading.hide();
				return;
			}
			if(_this.verificationCode==null || _this.verificationCode==""){
				_this.$alert('2','验证码不能为空');
				_this.$loading.hide();
				return;
			}
			var postData = _this.$qs.stringify({
				bankName:_this.cardForm.bankName,
				cardNum:_this.cardForm.cardNum,
				realname:_this.cardForm.realname,
				keyCode:_this.keyCode,
				code:_this.verificationCode,
				phone:_this.phone
			})
			_this.$axios.post('/agent/wallet/addBankCard',postData).then(function(res){
				if(res.data.message=='succ'){
					_this.$loading.hide();
					_this.$alert('1','添加成功',function(){
						_this.page=1;
						_this.bankCardList();
					})
				}else{
					_this.$loading.hide();
					_this.$alert('2',res.data.result);
				}
			}).catch(function (error) {
			    console.log(error);
			});			
		},
		bankCardList:function(){
			var _this = this;
			_this.$axios.post('/agent/wallet/showBankCard',).then(function(res){
			    console.log(res.data.message);
			    var result = res.data.result;
			    _this.cardList = [];
			    for(var i = 0;i<result.length;i++){
			    	_this.cardList.push(result[i]);
			    }
			}).catch(function (error) {
			    console.log(error);
			});	
		},
		deleteBankCard:function(id){
			var _this = this;
			console.log(_this.cardList[id].id)
			var postData = _this.$qs.stringify({
				id:_this.cardList[id].id,
			})
			_this.$axios.post('/agent/wallet/deleteBankCard',postData).then(function(res){
				if(res.data.message=='succ'){
					_this.bankCardList();
					_this.$alert("2","取消绑定成功");
				}else{
					console.log(res.data.result);
				}
			}).catch(function (error) {
			    console.log(error);
			});		
		},
		info: function(){
			var _this = this;
			_this.$axios.post('/agent/info/show').then(function(res){
			    var data = res.data.result;
		    	_this.phone = data.phone;
			}).catch(function (error) {
			    console.log(error);
			});
		},
	},
	created:function(){
		this.info();
	}
	
}
</script>

<style>
/*-----下拉框样式修改--------*/
.el-input__inner{
	height: 30px;
	line-height: 30px;
	border: 1px solid #E6E6E6;
	border-radius: 0;
}
.el-input__icon{
	height: auto;
	line-height: 30px;
}
.el-select-dropdown__item.selected{
	color: #FF464E;
}
.el-select .el-input.is-focus .el-input__inner{
	border-color: #e6e6e6;
}
.el-select .el-input__inner:focus{
	border-color: #e6e6e6;
}
</style>

<style scoped>
#bankCard{
	width: 1030px;
	background-color: #fff;
	padding: 30px;
	padding-bottom: 10px;
	box-sizing: border-box;
}
.Title{
	font-size: 20px;
	color: #545454;
}
/*---------银行卡列表------------*/
.card_list{
	border-top: 1px solid #E6E6E6;
	padding: 15px 25px;
	box-sizing: border-box;
	margin-top: 15px;
	display: flex;
	flex-wrap: wrap;
}
.card_item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #E6E6E6;
	padding: 10px;
	padding-left: 8px;
	box-sizing: border-box;
	width: 328px;
	margin-right: 20px;
	margin-bottom: 20px;
}
.item_left{
	display: flex;
	align-items: center;
}
.item_left img{
	height: 50px;
	display: block;
	margin-right: 5px;
}
.bank_name{
	display: flex;
	flex-direction: column;
	height: 50px;
	justify-content: space-between;
	color: #545454;
}
.card_operation{
	height: 50px;
	border-left: 1px solid #E6E6E6;
	padding-left: 10px;
}
.card_operation a{
	color: #FF464E;
	height: 25px;
	line-height: 25px;
}
.card_operation p{
	color: #FF464E;
	height: 25px;
	line-height: 25px;
	border-top: 1px solid #E6E6E6;
	cursor: pointer;
}
.add_card{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 328px;
	height: 70px;
	border: 1px solid #FF464E;
	font-size: 16px;
	color: #FF464E;
	box-sizing: border-box;
	cursor: pointer;
}
.add_card img{
	height: 25px;
	display: block;
	margin-right: 20px;
}
/*------------绑定银行卡表单----------------*/
.bank_form{
	border-top: 1px solid #E6E6E6;
	padding: 15px 25px;
	box-sizing: border-box;
	margin-top: 15px;
}
.form_item{
	display: flex;
	align-items: center;
	color: #545454;
	margin-bottom: 20px;
}
.form_item>p{
	width: 128px;
}
.form_item input[type='text']{
	height: 30px;
	width: 300px;
	border: 1px solid #E6E6E6;
	padding-left: 10px;
	box-sizing: border-box;
}
.phone{
	display: flex;
	align-items: center;
}
.phone p{
	width: 160px;
	text-align: center;
}
.phone input{
	width: 140px;
	height: 30px;
	border: 1px solid #FF464E;
	color: #FF464E;
	box-sizing: border-box;
	background-color: #fff;
}
#sub{
	width: 150px;
	height: 30px;
	background-color: #FF464E;
	color: #FFFFFF;
	border: none;
	margin-left: 128px;
}
.el-select{
	width: 300px;
}
</style>